<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="/static/pengpai/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pengpai/component/zTree_v3/css/zTreeStyle/zTreeStyle.css"  />
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">


            <input id="roleId" type="hidden" name="roleId" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入角色名"  th:value="${role.roleId}" READONLY class="layui-input">

            <div class="layui-form-item">
                <label class="layui-form-label required">角色名:</label>
                <div class="layui-input-block">
                    <input  type="text" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入角色名" th:value="${role.roleName}" READONLY class="layui-input">
                </div>
            </div>
            <div>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="role-permission-update">
                <i class="layui-icon layui-icon-ok"></i>
                更新
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>

</form>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="/static/pengpai/component/layui/layui.js"></script>
<script src="/static/pengpai/component/pear/pear.js"></script>
<script type="text/javascript" src="/static/pengpai/component/zTree_v3/js/jquery.ztree.all.js" ></script>


<script>
    layui.use(['form', 'jquery'], function() {
        let form = layui.form;
        let $ = layui.jquery;

        form.on('submit(role-permission-update)', function(data) {
            var nodes = zTreeObj.getCheckedNodes();
            if (nodes.length>0) {
                var index = zTreeObj.getNodeIndex(nodes[0]);
            }
            let ids = []
            nodes.forEach(m=>{

                ids.push(m.id)
                }
            );
            var idstr = ids.toString();
            $.post('/sysRole/updateRolePermission',{'ids':idstr,'roleId':$("input#roleId").val()},function (r){
                console.log(r);
                if(r.code === 200){
                    parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                    parent.location.reload();
                }else{
                    layer.msg('提交失败！');
                }

            });

            console.log(ids)
            console.log(idstr)

        });
    })
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "id",  //节点数据中保存唯一标识的属性名称
                pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "title"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check:{
            enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
            nocheckInherit:true, //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
            chkboxType:{  "Y" : "ps", "N" : "ps"  }
        }
    };


    $.ajax({
        url: "/sysRole/permissionTree",
        type: "get",
        success: function (result) {
            //渲染树的数据
            console.log(result)
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result);
            zTreeObj.expandAll(true);
            $.ajax({
                    url: "/sysRole/getpermissionbyid?id="+$("input#roleId").val(),
                    type: "get",
                    success:function (result){
                        console.log(result)
                        for (i = 0; i < result.length; i++) {
                            var node = zTreeObj.getNodeByParam("id",result[i])
                            zTreeObj.checkNode(node, true, false,true)
                        }

                    }
                }
            )
        }
    }
    );




</script>
<script>
</script>
</body>
</html>
